<template>
  <div class="aside">
    <div v-for="(group, index) in menu"
         :key="index"
         class="menu-group">
      <div v-if="group.groupName "
           class="group-name flex align-center justify-between">
        <span>{{group.groupName}}</span>
        <PlusOutlined v-if="group.groupType===2" />
      </div>
      <router-link v-for="(item, idx) in group.children"
                   :to="item.menuLink"
                   :key="idx"
                   class="menu-item"
                   :class="menuHightLight === item.menuLink?'menu-item-select':''">
        <component v-if="item.icon"
                   class="icon"
                   :is="item.icon"></component>
        <span>{{item.menuName}}</span>
        <!-- <router-link tag="span"
                     style="color:#666"
                     :to="item.menuLink">{{item.menuName}}</router-link> -->
      </router-link>
    </div>
  </div>
</template>

<script>
import {
  CustomerServiceOutlined, VerticalAlignBottomOutlined, CloudOutlined,
  HeartOutlined, StarOutlined, LockOutlined, AlignLeftOutlined, PlusOutlined
} from '@ant-design/icons-vue';
import { ref, reactive, toRefs, getCurrentInstance, computed } from 'vue'
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
export default {
  components: {
    CustomerServiceOutlined,
    VerticalAlignBottomOutlined,
    CloudOutlined,
    HeartOutlined,
    StarOutlined,
    LockOutlined,
    AlignLeftOutlined,
    PlusOutlined
  },
  setup() {
    const { ctx } = getCurrentInstance()
    const route = useRoute()
    const router = useRouter()
    console.log('$$$', route, route.path, router);

    // console.log('***', ctx, ctx.$router);
    // const $router = ctx.$router.currentRoute.value

    const { menu } = toRefs(reactive({
      menu: [
        {
          groupType: 1,
          groupName: '',
          children: [
            { menuName: '发现音乐', menuLink: '/' },
            { menuName: '视频', menuLink: '/findVidoe' },
            { menuName: '朋友', menuLink: '/findFriend' },
            { menuName: '直播', menuLink: '/findLive' },
            { menuName: '私人FM', menuLink: '/myFm' },
          ]
        },
        {
          groupType: 2,
          groupName: '我的音乐',
          children: [
            { icon: 'CustomerServiceOutlined', menuName: '本地音乐', menuLink: '/localMusic' },
            { icon: 'VerticalAlignBottomOutlined', menuName: '下载管理', menuLink: '/downloadManager' },
            { icon: 'CloudOutlined', menuName: '我的音乐云盘', menuLink: '/myYunPan' },
            { icon: 'StarOutlined', menuName: '我的收藏', menuLink: '/MyCollection' },
          ]
        },
        {
          groupType: 3,
          groupName: '创建歌单',
          children: [
            { icon: 'HeartOutlined', menuName: '我喜欢的音乐', menuLink: '/songSheet' },
            { icon: 'LockOutlined', menuName: '不公开的歌单', menuLink: '/songSheet' },
            { icon: 'AlignLeftOutlined', menuName: '歌单1', menuLink: '/songSheet' },
          ]
        }

      ]
    }))
    let menuHightLight = ref(route.path)
    // let menuHightLight = ref('/')

    onBeforeRouteUpdate(to => {
      menuHightLight.value = to.meta.jumpPath || to.path
    })


    return {
      menu,
      menuHightLight
    }
  }
}
</script>

<style lang='scss' scoped>
.aside {
  width: 200px;
  height: calc(100vh - #{$header-height});
  padding-left: 15px;
  padding: 12px;
  border-right: 1px solid #ededed;
  .menu-group {
    .group-name {
      padding-left: 10px;
      font-size: 12px;
      margin-top: 10px;
      margin-bottom: 4px;
    }
    .menu-item {
      display: block;
      height: 34px;
      line-height: 34px;
      font-size: 14px;
      margin-bottom: 2px;
      color: #333;
      padding: 0 10px;
      border-radius: 5px;
      cursor: pointer;
      .icon {
        margin-right: 8px;
      }
      &:hover {
        background-color: #ececef;
      }
      &.menu-item-select {
        background-color: #ececef;
        span,
        a {
          font-size: 18px;
          color: #000 !important;
          font-weight: bold;
        }
      }
    }
  }
}
</style>